<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="楼栋">
        <el-button @click="dialogFormVisible = true">新增楼栋</el-button>
        <!-- <FloorAdminTable></FloorAdminTable> -->
        <!-- <FloorAdminTable :FloorBuildingTabs="FloorBuildingTabs"></FloorAdminTable> -->
        <el-table
          :data="floorBuildingData"
          height="400px"
          max-height="400px"
          size="small"
          row-class-name="row"
          cell-class-name="column"
          :highlight-current-row="true"
          fit
        >
          <el-table-column type="selection" width="40"> </el-table-column>
          <el-table-column
            v-for="(item, index) in tableLabel"
            :key="index"
            :prop="item.prop"
            width="100"
            :label="item.label"
          >
          </el-table-column>
          <el-table-column label="操作">
            <template scope="scope">
              <el-button @click="tableDbEdit(scope.row)">编辑</el-button>
              <!-- <el-button @click="dialogFormVisible = false">编辑</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="总平图">
        <el-form ref="form">
          <el-form-item label="物业类型">
            <el-select v-model="form.region" placeholder="请选择物业类型">
              <el-option label="1" value="shanghai"></el-option>
              <el-option label="2" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="总平图管理">
            <el-upload action="#" list-type="picture-card" :auto-upload="false">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <!-- 点击新增，编辑楼栋弹出框 -->
    <el-dialog title="添加/编辑楼栋" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="楼栋号" :label-width="formLabelWidth">
          <el-input
            v-model="form.building_number"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属期" :label-width="formLabelWidth">
          <el-input
            v-model="form.affiliation_period_id"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="开盘时间" :label-width="formLabelWidth">
          <el-col :span="6">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.opening_time"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="入住时间" :label-width="formLabelWidth">
          <el-col :span="6">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.check_in_time"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="单元数" :label-width="formLabelWidth">
          <el-input
            v-model="form.number_of_units_id"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="总层数" :label-width="formLabelWidth">
          <el-input v-model="form.total_floors" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="总户数" :label-width="formLabelWidth">
          <el-input v-model="form.total_houses" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="梯户配比" :label-width="formLabelWidth">
          <el-input v-model="form.stair_ratio" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="居室" :label-width="formLabelWidth">
          <el-input v-model="form.bedroom" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="户型名称" :label-width="formLabelWidth">
          <el-input v-model="form.house_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="建筑面积" :label-width="formLabelWidth">
          <el-input v-model="form.construction_area" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import FloorAdminTable from "../components/FloorAdminTable";
export default {
  name: "FloorBuildingTabs",
  // props:['floorId'],
  data() {
    return {
      // 楼栋id
      // floorId:'',
      tableLabel: [
        { label: "楼栋", width: "40", prop: "building_number" },
        {
          label: "所属期",
          width: "",
          prop: "affiliation_period.affiliation_period_name",
        },
        { label: "开盘时间", width: "", prop: "opening_time" },
        { label: "入住时间", width: "", prop: "check_in_time" },
        {
          label: "单元数",
          width: "",
          prop: "number_of_units.number_of_units_name",
        },
        { label: "总层数", width: "", prop: "total_floors" },
        { label: "户数", width: "", prop: "total_houses" },
        { label: "梯户配比", width: "", prop: "stair_ratio" },
        { label: "户型", width: "", prop: "unit_type.house_name" },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        // 楼栋号/楼盘id
        building_number: "",
        // 所属期
        affiliation_period: "",
        // 开盘时间
        opening_time: "",
        // 入住时间
        check_in_time: "",
        // 单元数
        number_of_units_id: "",
        // 总层数
        total_floors: "",
        // 总户数
        total_houses: "",
        // 梯户配比
        stair_ratio: "",
        // 户型名称
        house_name: "",
        // 居室
        bedroom:'',
        // 建筑面积
        construction_area:'',
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      dialogImageUrl: "",
      dialogVisible: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  components: {
    FloorAdminTable,
  },
  methods: {
    
    handleRemove(file) {
      // console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      // console.log(file);
    },
    tableDbEdit(row) {
      // console.log(row);
      this.state = false;
      // 子组件向父组件传值
      this.$emit("func", this.state);
      // console.log(this.state);
    },
    submit() {
      this.axios({
        url: "http://172.16.10.77:8080/rema/addBuilding",
        method: "post",
        data: {
          building_id:1,
          building_number: this.form.building_number,
          // 所属期
          affiliation_period_id: this.form.affiliation_period_id,
          // 开盘时间
          opening_time: this.form.opening_time,
          // 入住时间
          check_in_time: this.form.check_in_time,
          // 单元数
          number_of_units_id: parseInt(this.form.number_of_units_id),
          // 总层数
          total_floors: parseInt(this.form.total_floors),
          // 总户数
          total_houses: parseInt(this.form.total_houses),
          // 梯户对比
          stair_ratio: this.form.stair_ratio,
          unit_type: {
            // 居室
            bedroom: this.form.bedroom,
            // 户型名称
            house_name: this.form.house_name,
            // 建筑面积
            construction_area: this.form.construction_area,
          },
        },
      })
        .then((data) => {
          // console.log(data);
        })
        .catch((err) => {
          // console.log(err);
        });
    },
  },
  computed: {
    floorBuildingData() {
      return this.$store.state.FloorData.floorBuildingDatas;
    },
  },
};
</script>

<style>
</style>